<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>机房登陆界面</title>
		<link rel="stylesheet" href="css/mdui.css" />

	</head>
	<body class="mdui-theme-primary-indigo mdui-theme-accent-pink ">
		<div class="mdui-typo-display-4">
			<div class="mdui-toolbar mdui-color-theme">
				<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
				<a href="javascript:;" class="mdui-typo-title">登陆</a>
				<div class="mdui-toolbar-spacer"></div>
				<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
				<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
				<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
			</div>
			
		</div>

		<div class="mdui-container">
			<div class="mdui-textfield mdui-textfield-floating-label">
				<label class="mdui-textfield-label">User name</label>
				<input id="useName" class="mdui-textfield-input" type="text" required />
				<div class="mdui-textfield-error">用户名不能为空</div>
			</div>
			
			<div class="mdui-textfield mdui-textfield-floating-label">
				<label class="mdui-textfield-label">Password</label>
				<input id="passWord"class="mdui-textfield-input" type="text" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" required />
				<div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
				<div class="mdui-textfield-helper">请输入至少 6 位，且包含大小写字母的密码</div>
			</div>
		</div>
		<div class="mdui-container">
			<button class="mdui-btn mdui-btn-raised" mdui-dialog="{target: '#example-4'}">注册</button>


			<button  id="LoginButton"class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent" >登陆</button>

			<div class="mdui-dialog" id="example-4">

				<div id="example4-tab1" class="mdui-p-a-2">
					<div class="mdui-container">
						<div class="mdui-dialog-title">注册界面</div>
						<div class="mdui-textfield mdui-textfield-floating-label">
							<label class="mdui-textfield-label">User name</label>
							<input id= "userName"class="mdui-textfield-input" type="text" required />
							<div class="mdui-textfield-error">用户名不能为空</div>
						</div>

						<div class="mdui-textfield mdui-textfield-floating-label">
							<label class="mdui-textfield-label">Password</label>
							<input id= "userPassword"class="mdui-textfield-input" type="text" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" required />
							<div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
							<div class="mdui-textfield-helper">请输入至少 6 位，且包含大小写字母的密码</div>
						</div>

						<form>
							<div class="mdui-col">
								<label class="mdui-radio">
									<input type="radio" name="group1" checked />
									<i class="mdui-radio-icon"></i>
									管理员
								</label>
								<label class="mdui-radio">
									<input type="radio" name="group1" />
									<i class="mdui-radio-icon"></i>
									设备管理者
								</label>
								
							</div>
							<button id="test" class="mdui-btn mdui-btn-raised" mdui-dialog="{target: '#example-4'}">注册</button>
							
						</form>
					</div>
				</div>
			</div>
		</div>

		<script src="js/mdui.js"></script>
		<script text="text/javascripit" src="js/jquery-min.js"></script>
		<script src="js/login.js"></script>
		<script src="js/register.js"></script>
	</body>
</html>
